<template>
    <!--    搜索条件-->
    <div class="contentContainer">
        <a-form
                ref="formRef"
                layout="inline"
                :model="searchData">
            <a-form-item label="菜单名称">
                <a-input v-model:value="searchData.name"></a-input>
            </a-form-item>
            <a-form-item label="状态">
                <a-select v-model:value="searchData.status" style="width: 200px">
                    <a-select-option :value="undefined">全部</a-select-option>
                    <a-select-option :value="0">有效</a-select-option>
                    <a-select-option :value="1">无效</a-select-option>
                </a-select>
            </a-form-item>
            <a-form-item label="类型">
                <a-select v-model:value="searchData.type" style="width: 200px">
                    <a-select-option :value="0">目录</a-select-option>
                    <a-select-option :value="1">菜单</a-select-option>
                    <a-select-option :value="2">功能</a-select-option>
                </a-select>
            </a-form-item>
            <a-form-item>
                <a-space>
                    <a-button type="primary" @click="load()">搜索</a-button>
                    <a-button type="default" @click="reset()">重置</a-button>
                </a-space>
            </a-form-item>
        </a-form>
    </div>
    <!--表格-->
    <div class="contentContainer">
        <a-button type="primary" @click="openModal({})" style="margin-bottom: 10px">新增</a-button>
        <a-table bordered
                 size="small"
                 :pagination="false"
                 :row-key="record => record.id"
                 :indent-size="30"
                 :row-class-name="(record,index) => index % 2 === 1 ? 'rowStyle' : null"
                 :dataSource="dataSource"
                 :columns="columns">
            <template #bodyCell="{text,index,column,record}">
                <div v-if="column.key == 'status'">
                    {{text == 0 ? '有效' : '无效'}}
                </div>
                <div v-if="column.key == 'type'">
                    {{text == 0 ? '目录' : (text == 1 ? '菜单' : '功能')}}
                </div>
                <div v-if="column.key == 'action'">
                    <a-space>
                        <a-button type="primary" @click="openModal(record)">编辑</a-button>
                        <a-popconfirm
                                title="删除数据后无法再次查看！是否确认删除?"
                                ok-text="是"
                                cancel-text="否"
                                @confirm="okDelete(record.id)"
                        >
                            <a-button type="danger">删除</a-button>
                        </a-popconfirm>
                    </a-space>
                </div>
            </template>
        </a-table>
    </div>
    <!--编辑模态框-->
    <a-modal v-model:visible="visible" :title="modalTitle" @ok="handleOk">
        <a-form
                ref="formRef"
                :label-col="{ span: 6 }"
                :wrapper-col="{ span: 18 }"
                :model="menu">
            <a-form-item label="类型">
                <a-radio-group v-model:value="menu.type" @change="radioChangeHandler">
                    <a-radio :value="0">目录</a-radio>
                    <a-radio :value="1">菜单</a-radio>
                    <a-radio :value="2">功能</a-radio>
                </a-radio-group>
            </a-form-item>
            <a-form-item label="菜单名称">
                <a-input v-model:value="menu.name"></a-input>
            </a-form-item>
            <a-form-item label="上级路径" v-if="menu.type != 0">
                <a-select v-model:value="menu.parentId"
                          :options="parentMenuList"
                          :field-names="{label: 'name', value: 'id'}"></a-select>
            </a-form-item>
            <a-form-item label="地址" v-if="menu.type == 1">
                <a-select v-model:value="menu.url"
                          :options="urlList"
                          :field-names="{label: 'path', value: 'path'}"></a-select>
            </a-form-item>
            <a-form-item label="标识" v-if="menu.type == 2">
                <a-input v-model:value="menu.pstr"></a-input>
            </a-form-item>
            <a-form-item label="状态">
                <a-switch v-model:checked="menu.status"
                          :checked-value="0"
                          :un-checked-value="1"
                          checked-children="有效"
                          un-checked-children="无效"/>
            </a-form-item>
            <a-form-item label="排序号">
                <a-input-number v-model:value="menu.sortNo" min="0">
                </a-input-number>
            </a-form-item>
            <a-form-item label="备注">
                <a-textarea v-model:value="menu.remark"
                            :auto-size="{ minRows: 2, maxRows: 5 }">
                </a-textarea>
            </a-form-item>
        </a-form>
    </a-modal>
</template>

<script setup>
    import {ref, onMounted} from 'vue'
    import axios from 'axios'
    import {message} from 'ant-design-vue'
    import router from '@/router/index.js'
    // import dayjs from "dayjs";

    const searchData = ref({})
    const columns = [
        {
            title: '菜单名称',
            dataIndex: 'name',
            key: 'name',
            width: 300
        },
        {
            title: '菜单类型',
            dataIndex: 'type',
            key: 'type',
            align: 'center',
            width: 100
        },
        {
            title: '状态',
            dataIndex: 'status',
            key: 'status',
            align: 'center',
            width: 100
        },
        {
            title: '地址',
            dataIndex: 'url',
            key: 'url',
            width: 150
        },
        {
            title: '标识',
            dataIndex: 'pstr',
            key: 'pstr',
            width: 150
        },
        {
            title: '排序号',
            dataIndex: 'sortNo',
            key: 'sortNo',
            align: 'center',
            width: 70
        },
        {
            title: '备注',
            dataIndex: 'remark',
            key: 'remark',
            width: 300
        },
        {
            title: '操作',
            key: 'action',
            align: 'center',
            width: 200
        }
    ]
    const dataSource = ref([])
    const menu = ref({})
    const menuTemp = ref({})
    const modalTitle = ref('')
    const parentMenuList = ref([])
    const urlList = ref([])
    const visible = ref(false)

    const openModal = (obj) => {
        menu.value = JSON.parse(JSON.stringify(obj))
        menuTemp.value = JSON.parse(JSON.stringify(obj))
        if (obj.id) {
            modalTitle.value = '修改'
        } else {
            modalTitle.value = '新增'
            menu.value.status = 0
            menu.value.type = 0
            menuTemp.value.status = 0
            menuTemp.value.type = 0
        }
        console.log("模态框的用户数据", menu.value)
        urlList.value = []
        router.options.routes.forEach(val => {
            if (val.name == 'home') {
                val.children.forEach(value => {
                    urlList.value.push(value)
                })
            }
        })
        if (menu.value.type != 0){
            axios.get('menu/queryByType/' + (menu.value.type - 1)).then(rs => {
                parentMenuList.value = rs.data.data
            })
        }
        visible.value = true
    }

    const handleOk = () => {
        console.log("提交的用户数据", menu.value)
        axios.post('menu/saveOrUpdate', menu.value).then(rs => {
            if (rs.data.code == 200) {
                if (menu.value.id) {
                    message.success("《" + menu.value.name + "》角色的数据修改成功")
                } else {
                    message.success("成功添加新角色《" + menu.value.name + "》")
                }
                visible.value = false
                load()
            } else {
                message.error(rs.data.message)
            }
        })
    }

    const okDelete = (id) => {
        console.log("要删除的菜单的id", id)
        axios.delete('menu/deleteById/' + id).then(rs => {
            if (rs.data.code == 200) {
                message.success("删除成功")
                load()
            } else {
                message.error(rs.data.message)
            }
        })
    }

    const load = () => {
        console.log("查询的参数", searchData.value)
        axios.get('menu/queryByCondition', {
            params: {
                name: searchData.value.name,
                status: searchData.value.status,
                type: searchData.value.type
            }
        }).then(rs => {
            console.log("角色查询结果", rs.data)
            if (rs.data.code == 200) {
                dataSource.value = rs.data.data
            }
        })
    }

    const reset = () => {
        searchData.value = {}
        load()
    }

    const radioChangeHandler = (e) => {
        console.log("菜单类型发生变化时", e)
        menu.value = JSON.parse(JSON.stringify(menuTemp.value))
        if (e.target.value == 0) {
            menu.value.url = undefined
            menu.value.pstr = undefined
            menu.value.parentId = 0
            menu.value.type = 0
        } else if (e.target.value == 1) {
            axios.get('menu/queryByType/' + (e.target.value - 1)).then(rs => {
                parentMenuList.value = rs.data.data
            })
            menu.value.type = 1
            menu.value.pstr = undefined
            menu.value.parentId = undefined
        } else if (e.target.value == 2) {
            axios.get('menu/queryByType/' + (e.target.value - 1)).then(rs => {
                parentMenuList.value = rs.data.data
            })
            menu.value.type = 2
            menu.value.url = undefined
            menu.value.parentId = undefined
        }
    }

    onMounted(() => {
        load()
    })
</script>

<style scoped>
    :deep(.rowStyle) {
        background-color: #fafafa;
    }
</style>